<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.bbg {
				background-color: #DD524D;
			}
			
			.mui-bar-tab .mui-tab-item.mui-active {
				color: #DD524D;
				font-weight: bold;
			}			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav bbg">
			<!--<div id="logo">
				<img src="img/logo.png" />
			</div>-->
			<h1 id="appTitle" class="mui-title" style="color: #FFFFFF;">新闻</h1>
			<a id="hrmbtn" class="mui-icon mui-icon-bars mui-pull-right" style="color: #FFFFFF;"></a>
		</header>

		<nav class="mui-bar mui-bar-tab" id="footer-Menu">
			<a class="mui-tab-item mui-active" id="news">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">新闻</span>
			</a>
			<a class="mui-tab-item" id="search">
				<span class="mui-icon mui-icon-help"></span>
				<span class="mui-tab-label">问答</span>
			</a>
			<a class="mui-tab-item" id="weather">
				<span class="mui-icon mui-icon-star"></span>
				<span class="mui-tab-label">天气</span>
			</a>
			<a class="mui-tab-item" id="my">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

		<script src="js/lib/mui.min.js"></script>
		<script type="text/javascript" src="js/lib/h.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			var titleStrs = ['新闻', '问答', '天气', '我的'];
			var extend = function(destination, source) {
				for(var property in source) {
					destination[property] = source[property]
				}
				return destination
			}

			var subPage = function(id, options) {
				var subpageStyle = {
					top: '44px',
					bottom: '51px',
					width: "100%"
				}
				var opt = extend(subpageStyle, options);
				return {
					url: 'pages/' + id,
					id: id,
					styles: opt
				};
			}

			mui.init({
				subpages: [
					subPage('search.html', {
						left: '100%'
					}),
					subPage('weather.html', {
						left: '200%'
					}),
					subPage('my.html', {
						left: '300%'
					})
				]
			});

			mui.plusReady(function() {
				//				var _self = plus.webview.getLaunchWebview();
				//				var _second = plus.webview.getSecondWebview();
				//				_self.append(_second);
				h('#news').tap(function() {
					changeSub(1)
				});
				h('#search').tap(function() {
					changeSub(2)
				});
				h('#weather').tap(function() {
					changeSub(3)
				});
				h('#my').tap(function() {
					changeSub(4)
				});
				plus.navigator.setStatusBarBackground("#DD524D");
				document.getElementById('hrmbtn').addEventListener('tap', function(event) {
					mui.fire(plus.webview.getWebviewById('news.html'), 'changeCatogary');
				}, false);
			});

			function changeSub(index) {
				var news = plus.webview.getWebviewById('news.html'); //默认主页
				var search = plus.webview.getWebviewById('search.html'); //搜索页面
				var weather = plus.webview.getWebviewById('weather.html'); //热点页面
				var my = plus.webview.getWebviewById('my.html'); //我的页面
				news.setStyle({
					left: (1 - index) * 100 + "%"
				}); //主页偏移0
				search.setStyle({
					left: (2 - index) * 100 + "%"
				}); //搜索偏移100%
				weather.setStyle({
					left: (3 - index) * 100 + "%"
				}); //热点偏移200%
				my.setStyle({
					left: (4 - index) * 100 + "%"
				}); //我的偏移200%
				changeTitle(titleStrs[index - 1]);
				if(index > 1) {
					document.getElementById("hrmbtn").style.display = 'none';
				} else {
					document.getElementById("hrmbtn").style.display = '';
				}
			}

			function changeTitle(title) {
				document.getElementById('appTitle').innerHTML = title;
			}

			document.addEventListener('changeTitle', function(event) {
				changeTitle(event.detail.title);
			});
			document.addEventListener('showHrmBtn', function() {
				document.getElementById("hrmbtn").style.display = '';
			});
			document.addEventListener('hideHrmBtn', function() {
				document.getElementById("hrmbtn").style.display = 'none';
			});
		</script>
	</body>

</html>